<template>
  <view class="page-container">
    <!-- 顶部导航栏区域（不变） -->
    <view class="top-tab">
      <scroll-view scroll-x="true" class="scroll-x-container">
        <view class="tab-item">
          <image style="width: 30rpx; height: 35rpx; vertical-align: middle;" src="/static/shouhu.png"></image>
        </view>
        <view class="tab-item">要闻</view>
        <view class="tab-item">推荐</view>
        <view class="tab-item">关注流</view>
        <view class="tab-item">24小时</view>
        <view class="tab-item">娱乐</view>
        <view class="tab-item">泉州</view>
        <view class="tab-item">财经</view>
        <view class="tab-item">生活</view>
        <view class="tab-item">科技</view>
        <view class="tab-item">军事</view>
        <view class="tab-item">体育</view>
        <view class="tab-item">汽修</view>
        <view class="tab-item">健康</view>
        <view class="tab-item">国际</view>
        <view class="tab-item">千里眼</view>
        <view class="tab-item">5G</view>
      </scroll-view>
    </view>

    <!-- 信息提示区域（不变） -->
    <view class="notice-bar">
      <view class="notice-text">为您更新了15条内容</view>
    </view>

    <!-- 泉州天气区域（不变） -->
    <view class="weather-container">
      <view class="weather-overview" @click="toggleWeatherDetail">
        <view class="weather-left">
          <text v-if="weatherLoading" class="loading-text">加载中...</text>
          <text v-else-if="weatherError" class="error-text">天气获取失败</text>
          <view v-else class="weather-info">
            <text class="city">泉州</text>
            <text class="temp">{{ todayWeather.low }}~{{ todayWeather.high }}</text>
            <text class="type">{{ todayWeather.type }}</text>
            <text class="pm25">PM2.5 {{ weatherData.pm25 }}</text>
          </view>
        </view>
        <view class="weather-right">
          <image 
            :src="isDetailShow ? '/static/up.png' : '/static/down.png'" 
            style="width: 24rpx; height: 24rpx;"
          ></image>
        </view>
      </view>
      <view class="weather-detail" v-if="isDetailShow && !weatherError && !weatherLoading">
        <view class="today-detail">
          <view class="detail-title">今日详情</view>
          <view class="detail-list">
            <view class="detail-item">
              <text class="item-label">日期</text>
              <text class="item-value">{{ todayWeather.date }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">风向风力</text>
              <text class="item-value">{{ todayWeather.fengxiang }} {{ todayWeather.fengli }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">空气质量</text>
              <text class="item-value">{{ weatherData.quality }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">湿度</text>
              <text class="item-value">{{ weatherData.shidu }}%</text>
            </view>
          </view>
        </view>
        <view class="multi-day-preview">
          <view class="detail-title">未来6天预报</view>
          <view class="multi-day-list">
            <view class="day-item" v-for="(day, index) in forecastList.slice(1,7)" :key="index">
              <view class="day-date">{{ day.date }}</view>
              <view class="day-weather">{{ day.type }}</view>
              <view class="day-temp">{{ day.low }}~{{ day.high }}</view>
              <view class="day-wind">{{ day.fengxiang }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索区域（不变） -->
    <view class="search-container">
      <input type="text" placeholder="搜索关键词" class="search-input" />
    </view>

    <!-- 新闻列表区域：用v-for动态渲染JSON数据 -->
    <view class="news-list">
      <!-- 动态渲染新闻（核心修改） -->
      <template v-for="news in newsList" :key="news.id">
        <!-- 广告新闻 -->
        <view class="news-item ad-item" v-if="news.isAd">
          <view class="news-title">{{ news.title }}</view>
          <view class="ad-img-group">
            <view class="ad-img" v-for="(img, idx) in news.imgUrls" :key="idx">
              <image style="width: 100%; height: 100%; object-fit: cover;" :src="img"></image>
            </view>
          </view>
          <view class="news-meta">
            <view class="meta-tag">广告</view>
            <view class="meta-source">{{ news.source }}</view>
          </view>
        </view>

        <!-- 带图片的非广告新闻 -->
        <navigator url="../newsinfo/newsinfo" class="news-link" v-else-if="news.hasImg && !news.isAd">
          <view class="news-item with-img">
            <view class="news-img">
              <image style="width: 100%; height: 100%; object-fit: cover;" :src="news.imgUrl"></image>
            </view>
            <view class="news-content">
              <view class="news-title">{{ news.title }}</view>
              <view class="news-meta">
                <view class="meta-source">{{ news.source }}</view>
                <view class="meta-comment">{{ news.commentCount }}评</view>
              </view>
            </view>
          </view>
        </navigator>

        <!-- 无图片的置顶新闻 -->
        <view class="news-item" v-else-if="news.isTop && !news.hasImg">
          <view class="news-title">{{ news.title }}</view>
          <view class="news-meta">
            <view class="meta-tag"><text class="top-tag">置顶</text></view>
            <view class="meta-source">{{ news.source }}</view>
            <view class="meta-comment">{{ news.commentCount }}评</view>
          </view>
        </view>
      </template>
    </view>

    <!-- 底部导航栏组件（不变） -->
    <TabBar :currentTab="activeTab" @tab-change="handleTabChange" />
  </view>
</template>

<script>
import NewsView from "@/components/NewsView.vue";
// 导入news.json数据（路径根据实际项目结构调整）
import newsData from "@/static/data/news.json";

export default {
  components: {
    NewsView
  },
  data() {
    return {
      activeTab: 0,
      // 天气相关数据（不变）
      weatherLoading: false,
      weatherError: false,
      weatherData: {},
      todayWeather: {},
      forecastList: [],
      isDetailShow: false,
      // 从JSON导入新闻列表（核心修改）
      newsList: newsData.newsList
    };
  },
  onLoad() {
    this.getQuanzhouWeather();
  },
  methods: {
    // 底部导航切换（不变）
    handleTabChange(idx) {
      this.activeTab = idx;
      switch(idx) {
        case 1:
          uni.navigateTo({ url: "/pages/video/video" });
          break;
        case 2:
          uni.navigateTo({ url: "/pages/topic/topic" });
          break;
        case 3:
          uni.navigateTo({ url: "/pages/NewsTaBar/mine/mine" });
          break;
        default:
          break;
      }
    },
    // 天气接口请求（不变）
    getQuanzhouWeather() {
      this.weatherLoading = true;
      uni.request({
        url: "http://t.weather.sojson.com/api/weather/city/101230501",
        method: "GET",
        timeout: 60000,
        success: (res) => {
          if (res.statusCode === 200 && res.data && res.data.status === 200) {
            this.weatherData = res.data.data;
            this.forecastList = res.data.data.forecast;
            this.todayWeather = this.forecastList[0];
          } else {
            this.weatherError = true;
            uni.showToast({ title: "天气数据异常", icon: "none", duration: 2000 });
          }
        },
        fail: (err) => {
          this.weatherError = true;
          console.error("天气接口调用失败：", err);
          uni.showToast({ title: "天气请求失败", icon: "none", duration: 2000 });
        },
        complete: () => {
          this.weatherLoading = false;
        }
      });
    },
    // 切换天气详情（不变）
    toggleWeatherDetail() {
      if (!this.weatherError && !this.weatherLoading) {
        this.isDetailShow = !this.isDetailShow;
      }
    }
  }
};
</script>

<style scoped>
/* 样式部分完全不变，保留原有样式 */
.page-container {
  padding-top: 90rpx;
  padding-bottom: 120rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
}
.top-tab {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90rpx;
  background-color: #DD524D;
  z-index: 999;
  display: flex;
  align-items: center;
}
.scroll-x-container {
  width: 100%;
  height: 60rpx;
  white-space: nowrap;
  padding: 0 20rpx;
}
.tab-item {
  display: inline-block;
  color: #fff;
  font-size: 28rpx;
  margin-right: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.tab-item:contains("泉州") {
  border-bottom: 4rpx solid #fff;
  font-weight: bold;
}
.notice-bar {
  background-color: #DD524D;
  color: #fff;
  padding: 15rpx 20rpx;
}
.notice-text {
  font-size: 26rpx;
}
.weather-container {
  background-color: #DD524D;
  color: #fff;
  padding: 15rpx 20rpx;
}
.weather-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.weather-info {
  display: flex;
  gap: 15rpx;
  align-items: center;
}
.city {
  font-size: 26rpx;
  font-weight: bold;
}
.temp {
  font-size: 24rpx;
}
.type {
  font-size: 24rpx;
}
.pm25 {
  font-size: 22rpx;
  opacity: 0.9;
}
.loading-text, .error-text {
  font-size: 24rpx;
}
.weather-detail {
  margin-top: 15rpx;
  padding-top: 15rpx;
  border-top: 1rpx solid rgba(255,255,255,0.3);
}
.detail-title {
  font-size: 24rpx;
  margin-bottom: 15rpx;
  font-weight: bold;
}
.detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 20rpx;
}
.detail-item {
  width: calc(50% - 7.5rpx);
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
}
.item-label {
  opacity: 0.9;
}
.multi-day-list {
  display: flex;
  overflow-x: auto;
  gap: 15rpx;
  padding-bottom: 10rpx;
}
.day-item {
  min-width: 120rpx;
  text-align: center;
  font-size: 22rpx;
}
.day-date {
  margin-bottom: 8rpx;
}
.day-weather {
  margin-bottom: 8rpx;
  font-weight: bold;
}
.day-temp {
  margin-bottom: 8rpx;
}
.search-container {
  background-color: #DD524D;
  padding: 0 20rpx 15rpx;
}
.search-input {
  width: 100%;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #333;
}
.news-list {
  padding: 0 20rpx;
}
.news-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.news-title {
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
  margin-bottom: 15rpx;
}
.news-item.with-img {
  display: flex;
}
.news-img {
  width: 200rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.news-content {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.news-meta {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #888;
}
.meta-tag {
  margin-right: 15rpx;
}
.meta-source {
  margin-right: 15rpx;
}
.top-tag {
  background-color: #fff;
  color: #DD524D;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  font-size: 20rpx;
}
.ad-item .ad-img-group {
  display: flex;
  gap: 15rpx;
  margin-bottom: 15rpx;
}
.ad-img {
  flex: 1;
  height: 140rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
</style>